<template>
  <!-- 小说章节内容组件 -->
  <div class="content_read">
    <div class="box_con">
      <!-- 导航条 -->
      <div class="con_top">
        <a href="javascript:;" @click="JumpRoute('/index')">书荒网</a
        >&nbsp;&nbsp;>&nbsp;&nbsp;
        <a href="javascript:;" @click="JumpRoute(fiction_cate_route)">{{
          Chapterlist.book_cate
        }}</a
        >&nbsp;&nbsp;>&nbsp;&nbsp;
        <a href="javascript:;" @click="JumpDetailRoute(book_infos_id)">{{
          Chapterlist.book_name
        }}</a
        >&nbsp;&nbsp;>&nbsp;&nbsp;
        <a href="javascript:;"
          >正文卷&nbsp;&nbsp;{{ Chapterlist.detail_title }}</a
        >
      </div>
      <div class="bookname">
        <h1>正文卷&nbsp;&nbsp;{{ Chapterlist.detail_title }}</h1>
        <div class="bottem1">
          <a href="javascript:;">投推荐票</a>
          <a
            href="javascript:;"
            @click="JumpProNextRoute(book_infos_id, pro_sortid)"
            >上一章</a
          >
          ←
          <a href="javascript:;" @click="JumpDetailRoute(Chapterlist.book_id)"
            >章节目录</a
          >
          →
          <a
            href="javascript:;"
            @click="JumpProNextRoute(book_infos_id, next_sortid)"
            >下一章</a
          >
          <a href="javascript:;">加入书签</a>
        </div>
        <!-- 推荐阅读 -->
        <div id="listtj">
          &nbsp;&nbsp;推荐阅读：
          <a
            href="javascript:;"
            v-for="item in bookrecomlist"
            :key="item.id"
            @click="JumpDetailRoute(item.book_id)"
            >{{ item.book_name }}&nbsp;&nbsp;&nbsp;&nbsp;</a
          >
        </div>
        <!-- 小说内容 -->
        <div
          id="content"
          style="color: rgb(147, 112, 219); white-space: pre-wrap;"
          v-html="fiction_content"
        >
          <!-- {{ Chapterlist.detail_content }} -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import '../../assets/css/chapter.css'
export default {
  data() {
    return {
      // 禁止a跳转样式
      aStyle: {
        'pointer-events': 'none'
      },
      // 小说book_id
      book_infos_id: '',
      // 小说章节id
      book_sortid: '',
      // 上一章小说id
      pro_sortid: '',
      // 下一章小说id
      next_sortid: '',
      // 小说章节内容数据
      Chapterlist: [],
      //   推荐阅读小说数据
      bookrecomlist: [],
      // 小说分类路由
      fiction_cate_route: '',
      // 小说内容
      fiction_content: ''
    }
  },
  created() {
    // 获取路由传递过来的 小说章节sort_id以及小说book_id
    this.book_sortid = this.$route.params.sort_id
    this.book_infos_id = this.$route.params.book_id
    // console.log('小说章节sort_id：', this.book_sortid)
    // console.log('小说book_id：', this.book_infos_id)

    // 获取小说章节内容数据
    this.getChapterlist()
    // 获取小说上一章节的sort_id
    this.getProSortid()
    // 获取小说下一章节的sort_id
    this.getNextSortid()
  },
  methods: {
    // 点击事件跳转路由
    JumpRoute(url) {
      this.$router.push({
        path: url
      })
    },
    // 点击事件，跳转小说详情页
    JumpDetailRoute(book_id) {
      this.$router.push({
        path: '/book/' + book_id
      })
    },
    // 点击事件跳转分类小说
    // JumpCatesRoute(url) {
    //   this.$router.push({
    //     path: url
    //   })
    // },
    // 点击事件，跳转小说章节页
    JumpChapterRoute(book_id, sort_id) {
      this.$router.push({
        path: '/chapter/' + book_id + '/' + sort_id
      })
    },
    // 获取小说章节内容数据
    async getChapterlist() {
      const { data: res } = await this.$http.get(
        `get_fiction_chapter_infos`, {
          params: {
            sort_id: this.book_sortid,
            book_id: this.book_infos_id
          }
        }
      )

      if (res.status !== 200) {
        return this.$message.error('获取小说章节数据失败！')
      }

      this.Chapterlist = res.book_chapter[0]

      // 处理小说正文内容
      //   console.log(this.Chapterlist.detail_content)
      this.fiction_content = this.Chapterlist.detail_content.replace(
        /(?<=[”。！？])/gi,
        '<br> \n'
      )

      // 小说分类名称对应的vuex-state路由
      this.fiction_cate_route = this.$store.state.fiction_cate[
        this.Chapterlist.book_cate
      ]

      // 获取小说推荐阅读
      // 获取详情页小说推荐limit15
      const { data: recom } = await this.$http.get(
        `get_book_detail_recom/${this.Chapterlist.book_cate}`
      )

      if (recom.status !== 200) {
        return this.$message.error('获取小说推荐数据失败！')
      }

      this.bookrecomlist = recom.data
      // console.log('推荐小说', this.bookrecomlist)

      // 获取上下章节id
    },
    // 获取上一章节的id
    async getProSortid() {
      const { data: pres } = await this.$http.get(`get_fiction_pre_chapter`, {
        params: {
          book_id: this.book_infos_id,
          sort_id: this.book_sortid
        }
      })
      if (pres.status !== 200) {
        return this.$message.info('开始阅读第一章节！')
      }
      // 将请求到的上一章节id赋值给pro_sortid变量
      this.pro_sortid = pres.data.sort_id
      // console.log('上一章id', this.pro_sortid)
    },
    // 获取小说下一章节的sort_id
    async getNextSortid() {
      const { data: nres } = await this.$http.get(`get_fiction_next_chapter`, {
        params: {
          // book_id: this.Chapterlist.book_id,
          book_id: this.book_infos_id,
          sort_id: this.book_sortid
        }
      })
      if (nres.status !== 200) {
        return this.$message.info('此章节为最新章节！')
      }
      // 将请求到的下一章节id赋值给next_sortid变量
      this.next_sortid = nres.data.sort_id
      // console.log('下一章id', this.next_sortid)
    },
    // 跳转上下章节
    JumpProNextRoute(book_id, sort_id) {
      if (!sort_id) {
        this.JumpDetailRoute(book_id)
      } else {
        this.JumpChapterRoute(book_id, sort_id)
      }
    }
  },
  // 此时，页面上的元素，已经被渲染完毕了！
  mounted() {}
}
</script>
